<!DOCTYPE html>
<html>
<head>
<title>Upload Files</title>
<script src="/static/siofu.client.min.js"></script>
<script src="/static/socket.io.js"></script>
 
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
 
    // Initialize instances: 
    var socket = io.connect();
    var siofu = new SocketIOFileUpload(socket);

    siofu.chunkSize = 1024*1024*1;
    // Configure the three ways that SocketIOFileUpload can read files: 
    document.getElementById("upload_btn").addEventListener("click", siofu.prompt, false);
    siofu.listenOnInput(document.getElementById("upload_input"));
    siofu.listenOnDrop(document.getElementById("file_drop"));
 
    // Do something on upload progress: 
    siofu.addEventListener("progress", function(event){
        var percent = event.bytesLoaded / event.file.size * 100;
        console.log("File is", percent.toFixed(2), "percent loaded");
    });
 
    // Do something when a file is uploaded: 
    siofu.addEventListener("complete", function(event){
        console.log(event.success);
        console.log(event.file);
    });
 
}, false);
</script> 
 
</head>
<body>
 
<p><button id="upload_btn">Prompt for File</button></p>
<p><label>Choose File: <input type="file" id="upload_input"/></label></p>
<div id="file_drop" dropzone="copy" title="drop files for upload">Drop File</div>
 
</body>
</html>